<template>
    <section class="section section-shaped section-lg my-0">
        <div class="shape shape-style-1 bg-gradient-default">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="container pt-lg-md">
            <div class="row justify-content-center">
                <div class="col-lg-5">
                    <card type="secondary" shadow
                          header-classes="bg-white pb-5"
                          body-classes="px-lg-5 py-lg-5"
                          class="border-0">
                        <template>
                            <div class="text-muted text-center mb-3">
                                <small>您好</small>
                            </div>
                        </template>
                        <template>
                            <div class="text-center text-muted mb-4">
                                <small>请登录</small>
                            </div>
                            <form role="form">
                                <base-input alternative
                                            v-model="ruleForm.userEmail"
                                            class="mb-3"
                                            placeholder="电子邮箱/Email"
                                            addon-left-icon="ni ni-email-83">
                                </base-input>
                                <base-input alternative
                                            v-model="ruleForm.userPasswd"
                                            type="password"
                                            placeholder="密码/Password"
                                            addon-left-icon="ni ni-lock-circle-open">
                                </base-input>
                                <base-checkbox v-model="autoLogin">
                                    记住我
                                </base-checkbox>
                                <div class="text-center">
                                    <base-button type="primary" @click="login" class="my-4">{{loginText}}</base-button>
                                </div>
                            </form>
                        </template>
                        <base-alert v-if="showDangerMsg" type="danger">
                            {{dangerMsg}}
                        </base-alert>
                    </card>
                    <div class="row mt-3">
                        <div class="col-6">
                            <a href="#" class="text-light">
                                <small>忘记密码?</small>
                            </a>
                        </div>
                        <div class="col-6 text-right">
                            <a href="#" @click="open('register')" class="text-light">
                                <small>没有账号？点击注册</small>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import {setStore, getStore, removeStore} from '../utils/storage.js'
import {userLogin} from '../api/index.js'
export default {
    data() {
      return {
          ruleForm: {
              userEmail: '',
              userPasswd: ''
          },
          autoLogin: false,
          loginText: '登录',
          showDangerMsg: false,
          dangerMsg: ''
      }
    },
    methods: {
        open (t) {
            this.$router.push({name: t});
        },
        getRemembered () {
            var judge = getStore('remember');
            if (judge === 'true') {
                this.autoLogin = true;
                this.ruleForm.userName = getStore('rusername');
                this.ruleForm.userPwd = getStore('rpassword');
            }
        },
        rememberPass() {
            if (this.autoLogin === true) {
                setStore('remember', 'true');
                setStore('ruseremail', this.ruleForm.userEmail);
                setStore('rpassword', this.ruleForm.userPasswd)
            } else {
                setStore('remember', 'false');
                removeStore('ruseremail');
                removeStore('rpassword')
            }
        },
        message(msg) {
            this.showDangerMsg = true;
            this.dangerMsg = msg;
        },
        login() {
            this.showDangerMsg = false;
            this.loginText = '登录中...';
            this.rememberPass();
            if (!this.ruleForm.userEmail || !this.ruleForm.userPasswd) {
                this.message("账号或密码不能为空！");
                this.loginText = '登录';
                return false
            }
            var params = {
                email: this.ruleForm.userEmail,
                psw: this.ruleForm.userPasswd,
                rememberme: this.autoLogin
            };
            userLogin(params).then(res => {
                if (res.code === "1") {
                    // setStore('token', res.result.token)
                    setStore('userId', res.data);
                    setStore('loginStatus', true);
                    removeStore('orders');
                    // this.$router.go(-1);
                    this.$router.push({name:"profile"});
                    this.loginText = '登录';
                } else {
                    this.loginText = '登录';
                    this.message(res.msg);
                    return false
                }
            })
            .catch(error => {
                this.message(error);
                this.loginText = '登录';
                return false
            })
        }
    },
    mounted() {
        this.getRemembered();
    }
};
</script>
<style>
</style>
